<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.description" prefix-icon="el-icon-search" clearable placeholder="问题描述" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.module" clearable size="small" class="filter-item" @change="crud.toQuery">
          <el-option v-for="item in dict.feedback_module" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="title" width="500px">
        <el-form ref="form" :model="form" size="small" label-width="90px">
          <el-form-item label="问题描述：" prop="description">
            <span>{{ form.description }}</span>
          </el-form-item>
          <el-form-item label="图片：">
            <el-image
              v-if="form.image1"
              style="width: 160px; height: 160px"
              :src="formatImage(form.image1)"
              :preview-src-list="[formatImage(form.image1)]"
            />
            <el-image
              v-if="form.image2"
              style="width: 160px; height: 160px"
              :src="formatImage(form.image2)"
              :preview-src-list="[formatImage(form.image2)]"
            />
            <el-image
              v-if="form.image3"
              style="width: 160px; height: 160px"
              :src="formatImage(form.image3)"
              :preview-src-list="[formatImage(form.image3)]"
            />
            <el-image
              v-if="form.image4"
              style="width: 160px; height: 160px"
              :src="formatImage(form.image4)"
              :preview-src-list="[formatImage(form.image4)]"
            />
            <el-image
              v-if="form.image5"
              style="width: 160px; height: 160px"
              :src="formatImage(form.image5)"
              :preview-src-list="[formatImage(form.image5)]"
            />
            <el-image
              v-if="form.image6"
              style="width: 160px; height: 160px"
              :src="formatImage(form.image6)"
              :preview-src-list="[formatImage(form.image6)]"
            />
          </el-form-item>
          <el-form-item label="回复：" prop="remark">
            <span>{{ form.remark }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="crud.cancelCU">关闭</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 320px)" :data="crud.data" size="small" style="width: 100%;" highlight-current-row @row-click="viewDetail" @selection-change="crud.selectionChangeHandler">
        <el-table-column label="编号" width="100px">
          <template slot-scope="scope">
            <span>Q{{ scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="问题描述" min-width="200px" />
        <el-table-column prop="module" label="模块" width="150px">
          <template slot-scope="scope">
            {{ dict.label.feedback_module[scope.row.module] }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="回答" min-width="200px" />
        <el-table-column label="操作" width="150px" align="center">
          <el-link>
            <svg-icon icon-class="viewMore" class="question-answer" />
          </el-link>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudFeedback from '@/api/information/feedback'
import CRUD, { presenter, header, form, crud } from '@brotherCrud/crud'
import rrOperation from '@brotherCrud/RR.operation'
import crudOperation from '@brotherCrud/CRUD.operation'
import pagination from '@brotherCrud/Pagination'
import { mapGetters } from 'vuex'

const defaultForm = { feedbackId: null, description: null, image1: null, image2: null, image3: null, image4: null, image5: null, image6: null, module: null, handler: null, status: null, remark: null, creator: null, createBy: null, updateBy: null, createTime: null, updateTime: null, dept: null }
export default {
  name: 'QuestionAnswer',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['feedback_module'],
  cruds() {
    return CRUD({ title: '问题反馈', url: 'api/feedback', idField: 'feedbackId', sort: 'feedbackId,desc', query: { isPublish: 1 }, optShow: { add: false, edit: false, del: false, download: false, reset: true }, crudMethod: { ...crudFeedback }})
  },
  data() {
    return {
      title: '', // 详情名
      usersList: [], // 用户列表
      statusList: [
        { label: '待处理', value: 0 },
        { label: '处理中', value: 1 },
        { label: '已解决', value: 2 }
      ],
      queryTypeOptions: [
        { key: 'description', display_name: '问题描述' },
        { key: 'module', display_name: '模块' },
        { key: 'status', display_name: '状态' },
        { key: 'creator', display_name: '提出人姓名' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    // 查看
    viewDetail(row) {
      this.crud.data.map((item, index) => {
        if (item.feedbackId === row.feedbackId) {
          this.title = 'Q' + (index + 1)
          this.crud.toView(this.crud.data[index], 'view')
        }
      })
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 格式化图片地址
    formatImage(url) {
      let urlF = ''
      if (url) {
        if (url.indexOf('\\') === -1) {
          urlF = this.baseApi + '/file/意见反馈/' + url.substring(url.lastIndexOf('/') + 1)
        } else {
          urlF = this.baseApi + '/file/意见反馈/' + url.substring(url.lastIndexOf('\\') + 1)
        }
      }
      return urlF
    }
  }
}
</script>

<style scoped>
::v-deep svg:hover path{
  fill: #00bb00 !important;
}
::v-deep .el-form-item--small .el-form-item__content{
  width: 345px !important;
  max-height: 200px;
  overflow: auto;
}
::v-deep .el-table__row{
  cursor: pointer;
}
</style>
